<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>支付账单 - 智能水表抄表系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/static/styles/main.css">
    <style>
        .payment-method {
            border: 2px solid #eee;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .payment-method:hover {
            border-color: #aaa;
        }

        .payment-method.selected {
            border-color: #0d6efd;
            background-color: #f8f9fa;
        }

        .payment-method img {
            height: 40px;
            object-fit: contain;
        }

        .qr-code {
            max-width: 200px;
            margin: 0 auto;
            padding: 10px;
            background: #f8f9fa;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .qr-code img {
            width: 100%;
        }
    </style>
</head>

<body>
    <header class="header">
        <h1><i class="fas fa-tint"></i> 智能水表抄表系统</h1>
    </header>

    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
        <div class="container">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/"><i class="fas fa-home"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/history"><i class="fas fa-history"></i> 历史记录</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/bills"><i class="fas fa-file-invoice-dollar"></i> 账单管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/anomalies"><i class="fas fa-exclamation-triangle"></i> 异常记录</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/water_plans"><i class="fas fa-project-diagram"></i> 水务规划</a>
                    </li>
                    {% if user and user.role == "admin" %}
                    <li class="nav-item">
                        <a class="nav-link" href="/admin"><i class="fas fa-user-shield"></i> 管理控制台</a>
                    </li>
                    {% endif %}
                </ul>
                <div class="navbar-nav">
                    <span class="nav-item nav-link">
                        <i class="fas fa-user"></i> {{ user.username }}
                    </span>
                    <a class="nav-link" href="/logout"><i class="fas fa-sign-out-alt"></i> 退出登录</a>
                </div>
            </div>
        </div>
    </nav>

    <div class="container py-4">
        <div class="row mb-4">
            <div class="col-md-12">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="/bills">账单管理</a></li>
                        <li class="breadcrumb-item"><a href="/bill/{{ bill.id }}">账单详情</a></li>
                        <li class="breadcrumb-item active" aria-current="page">支付</li>
                    </ol>
                </nav>
                <div class="d-flex justify-content-between align-items-center">
                    <h2><i class="fas fa-credit-card"></i> 支付账单</h2>
                    <a href="/bill/{{ bill.id }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> 返回账单
                    </a>
                </div>
            </div>
        </div>

        {% if error %}
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ error }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        {% endif %}

        <div class="row">
            <div class="col-md-8">
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-light">
                        <h3 class="card-title mb-0"><i class="fas fa-money-bill-wave"></i> 选择支付方式</h3>
                    </div>
                    <div class="card-body">
                        <form id="paymentForm" method="POST" action="/pay/{{ bill.id }}">
                            <div class="payment-method selected" onclick="selectPaymentMethod(this, 'wechat')">
                                <input type="radio" name="payment_method" value="wechat" checked class="d-none">
                                <div class="d-flex align-items-center">
                                    <img src="https://cdn.iconscout.com/icon/free/png-256/free-wechat-43-189793.png" 
                                         alt="微信支付" class="me-3">
                                    <div>
                                        <h5 class="mb-0">微信支付</h5>
                                        <small class="text-muted">使用微信扫码支付</small>
                                    </div>
                                </div>
                            </div>

                            <div class="payment-method" onclick="selectPaymentMethod(this, 'alipay')">
                                <input type="radio" name="payment_method" value="alipay" class="d-none">
                                <div class="d-flex align-items-center">
                                    <img src="https://cdn.iconscout.com/icon/free/png-256/free-alipay-226601.png" 
                                         alt="支付宝" class="me-3">
                                    <div>
                                        <h5 class="mb-0">支付宝</h5>
                                        <small class="text-muted">使用支付宝扫码支付</small>
                                    </div>
                                </div>
                            </div>

                            <div class="payment-method" onclick="selectPaymentMethod(this, 'bank_card')">
                                <input type="radio" name="payment_method" value="bank_card" class="d-none">
                                <div class="d-flex align-items-center">
                                    <img src="https://cdn.iconscout.com/icon/free/png-256/free-credit-card-1795347-1522616.png" 
                                         alt="银行卡" class="me-3">
                                    <div>
                                        <h5 class="mb-0">银行卡</h5>
                                        <small class="text-muted">使用银行卡支付</small>
                                    </div>
                                </div>
                            </div>

                            <div id="bankCardDetails" class="mt-3 p-3 border rounded bg-light d-none">
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="cardNumber" class="form-label">卡号</label>
                                        <input type="text" class="form-control" id="cardNumber" placeholder="1234 5678 9012 3456">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="cardName" class="form-label">持卡人</label>
                                        <input type="text" class="form-control" id="cardName" placeholder="张三">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="expiryDate" class="form-label">有效期</label>
                                        <input type="text" class="form-control" id="expiryDate" placeholder="MM/YY">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="cvv" class="form-label">CVV</label>
                                        <input type="text" class="form-control" id="cvv" placeholder="123">
                                    </div>
                                </div>
                            </div>

                            <div class="mt-4">
                                <button type="submit" class="btn btn-primary btn-lg w-100">
                                    <i class="fas fa-check-circle"></i> 确认支付 ¥{{ bill.amount }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-light">
                        <h3 class="card-title mb-0"><i class="fas fa-info-circle"></i> 账单信息</h3>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm">
                            <tbody>
                                <tr>
                                    <th>账单编号:</th>
                                    <td>{{ bill.id }}</td>
                                </tr>
                                <tr>
                                    <th>水表编码:</th>
                                    <td>{{ bill.meter_code }}</td>
                                </tr>
                                <tr>
                                    <th>用水量:</th>
                                    <td>{{ bill.water_usage }} m³</td>
                                </tr>
                                <tr>
                                    <th>账单日期:</th>
                                    <td>{{ bill.bill_date }}</td>
                                </tr>
                                <tr>
                                    <th>支付金额:</th>
                                    <td class="text-danger fw-bold">¥ {{ bill.amount }}</td>
                                </tr>
                            </tbody>
                        </table>

                        <div id="qrCodeContainer" class="mt-4 text-center">
                            <div class="qr-code">
                                <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=WaterMeterPayment:{{ bill.id }}"
                                    alt="支付二维码">
                            </div>
                            <p class="text-muted mt-2">使用手机扫码完成支付</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer">
        <div class="container">
            <p>&copy; 2023 智能水表抄表系统 | 提供水表读数和编码识别</p>
        </div>
    </footer>

    <script>
        function selectPaymentMethod(element, method) {
            // 移除所有已选中的样式
            document.querySelectorAll('.payment-method').forEach(item => {
                item.classList.remove('selected');
                item.querySelector('input').checked = false;
            });

            // 添加选中样式
            element.classList.add('selected');
            element.querySelector('input').checked = true;

            // 显示/隐藏银行卡详情
            const bankCardDetails = document.getElementById('bankCardDetails');
            if (method === 'bank_card') {
                bankCardDetails.classList.remove('d-none');
            } else {
                bankCardDetails.classList.add('d-none');
            }

            // 更改二维码图片（如果是扫码支付）
            const qrCodeContainer = document.getElementById('qrCodeContainer');
            if (method === 'bank_card') {
                qrCodeContainer.classList.add('d-none');
            } else {
                qrCodeContainer.classList.remove('d-none');
                // 可以切换不同的二维码图片
            }
        }
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>

</html> 